<template>
	<view class="page">
		<mskeleton selector="skeleton" bgcolor="#FFFFFF" loading :show="showSkeleton"></mskeleton>
		<view>
			<map subkey="WKHBZ-V5ZCU-7ODVC-BGXDB-HNV7J-KQBMP" layer-style="1" :polyline="polyline" :scale='scale' 
			:latitude="orderInfo.addressInfo.latitude" :longitude="orderInfo.addressInfo.longitude" :markers="covers"></map>
		</view>
		<view class="content">
			<view class="box" :data-lastop="footerHeight" @touchstart="move.touchstart" @touchend="move.touchend" 
				@touchmove="move.touchmove">
				<view class="skeleton">
					<uni-card :isFull="true" title="订单详情信息" isShadow >
						<view style="height:calc(90vh - 70px);overflow: auto;">
							<view v-if="orderInfo.images.length>0"  class="page-section-spacing">
								<swiper class="swiper" 
									indicator-dots="true" 
									autoplay="true" 
									interval="5000" 
									duration="1500"	>
									<swiper-item v-for="(item,index) in orderInfo.images" :key="index">
										<image @click="previewImage(index)" :src="item" mode="aspectFill"></image>
									</swiper-item>
								</swiper>
							 </view>
							<uni-list>
								<uni-list-item  class="skeleton-rect" title="订单类型:" :rightText="orderInfo.publicGive?'换取金钱':'公益赠送'" />
								<uni-list-item  class="skeleton-rect" title="物品情况:" :rightText="getWeightContent(orderInfo.garbageWeight)+'('+garbageTypes[orderInfo.garbageType].name+')'" />
								<uni-list-item  class="skeleton-rect" title="预约时间:" :rightText="orderInfo.appointTime" />
							</uni-list>
							<uni-card v-if="orderInfo.receivingOrdersUserId" :isFull="true" title="回收员信息" isShadow >
								<uni-list>
									<uni-list-item class="skeleton-rect" title="回收员姓名:" :rightText="orderInfo.receivingOrdersUserInfo.nickName+(orderInfo.state<4?'（距您'+dis+'）':'')" />
									<uni-list-item class="skeleton-rect" title="回收员手机:" :clickable="true" @click="callPhone(orderInfo.receivingOrdersUserInfo.mobile)">
										<template slot="footer">
											{{orderInfo.receivingOrdersUserInfo.mobile.replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')}}<uni-icons type="phone"  size="15" />
										</template>
									</uni-list-item>
								</uni-list>
							</uni-card>
							<uni-card v-if="orderInfo.state==4" :isFull="true" title="结算信息" isShadow >
								<view v-if="orderInfo.checkImage.length>0" class="page-section-spacing">
									<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
										<swiper-item v-for="(item,index) in orderInfo.checkImage" :key="index">
											<image @click="previewImage(orderInfo.checkImage,index)" :src="item" mode="aspectFill"></image>
										</swiper-item>
									</swiper>
								</view>
								<uni-list >
									<uni-list-item class="skeleton-rect" title="实际总重量:" :rightText="orderInfo.weight" />
									<uni-list-item class="skeleton-rect" title="实际总支付:" :rightText="orderInfo.integral" />
									<uni-list-item class="skeleton-rect" title="结算时间:" :rightText="initDateTime()" />
								</uni-list>
							</uni-card>
							<uni-card :isFull="true" title="上门信息" isShadow >
								<uni-list>
									<uni-list-item class="skeleton-rect" title="客户名称:" :rightText="orderInfo.addressInfo.userName" />
									<uni-list-item class="skeleton-rect" v-if="orderInfo.addressInfo" title="联系手机:" :clickable="true" @click="callPhone(orderInfo.addressInfo.phone)">
										<template slot="footer">
											{{orderInfo.addressInfo.phone.replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')}}<uni-icons type="phone"  size="15" />
										</template>
									</uni-list-item>
									<uni-list-item class="skeleton-rect" :clickable="true" title="地址详情:" @click="toAddress">
										<template slot="footer">
											<uni-icons type="paperplane"  size="20" />
										</template>
										</uni-list-item>
									<uni-list-item :clickable="true" :ellipsis="3" @click="toAddress" :title="orderInfo.addressInfo.locationAddress+orderInfo.addressInfo.addressDetail"/>
								</uni-list>
							</uni-card>
						</view>
					</uni-card>
					<button type="primary" v-if="orderInfo.state==2" @click="receivingOrders" style="background-color: #31b977;margin: 15px;">确认回收</button>
					<button type="primary" v-if="orderInfo.state==3" style="background-color: #31b977;margin: 15px;">订单已完成（待结算）</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script module="move" lang="wxs" src="../../common/usermap.wxs"></script>
<script>
	import mskeleton from '../../components/skeleton/skeleton';
	import {getDistances,dateUtils} from '../../common/utils.js'
	var QQMapWX = require('../../common/qqmap-wx-jssdk.js')
	var demo = new QQMapWX({
		key: 'WKHBZ-V5ZCU-7ODVC-BGXDB-HNV7J-KQBMP'
	})
	
	
	export default {
		components:{
			mskeleton
		},
		data() { 
			return {
				timeOver: false,
				footerHeight: 0,
				showSkeleton:true,
				orderInfo:{},
				address:{},
				covers: [],
				dis:0,
				polyline:[],
				garbageTypes:getApp().globalData.GarbageType,
				scale:13,
				
			}
		},
		mounted() {
			this.getFooterHeight();
		},
		onLoad(data) {
			this.orderInfo._id=data.id
		},
		async onShow(data) {
			let orderInfoTemp=await this.$api("recovery-order","getById",{_id:this.orderInfo._id})
			this.orderInfo=orderInfoTemp
			this.showSkeleton=false
			this.covers=[{
				width:30,
				height:30,
				label:{content:this.orderInfo.receivingOrdersUserId?"":"暂无人接单",color:"#1aad19"},
				latitude: this.orderInfo.addressInfo.latitude,
				longitude: this.orderInfo.addressInfo.longitude,
				iconPath: '../../static/mainPeo.png',
			}]
			if(this.orderInfo.receivingOrdersUserId&&this.orderInfo.state<4){
				this.$api("user-center","getUserLocationById",{_id:this.orderInfo.receivingOrdersUserId}).then(re=>{
					let vm = this;
					//只测试距离使用 calculateDistance
					demo.direction({
						mode:'bicycling', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
						//from参数不填默认当前地址
						from:this.orderInfo.addressInfo.latitude+','+this.orderInfo.addressInfo.longitude,
						to: re.latitude+","+re.longitude,
						success: res => {
							console.log(res)
							let ret = res;
							let coors = ret.result.routes[0].polyline;
							let distance = ret.result.routes[0].distance;
							if(distance>1000){
								vm.dis = (distance/1000).toString().substr(0,3)+"km"
							}else{
								vm.dis = distance+"m"
							}
							vm.covers.push({
								width:30,
								height:30,
								callout: {
									content: "回收员"+this.orderInfo.receivingOrdersUserInfo.nickName+"距您"+vm.dis,
									color:"#1aad19",
									borderRadius:20,
									padding:15,
									display:"ALWAYS"
								},
								label:{content:"距您"+vm.dis,color:"#1aad19"},
								latitude: re.latitude,
								longitude: re.longitude,
								iconPath: '../../static/somePeo.png',
							})
							if(distance>100000){
								vm.scale = 4
							}else  if(distance>60000){
								vm.scale = 6
							}else if(distance>20000){
								vm.scale = 8
							}else if(distance>10000){
								vm.scale = 11
							}else if(distance>5000){
								vm.scale = 12
							}else if(distance>1000){
								vm.scale = 13
							}
							let pl = [];
							let kr = 1000000;
							//坐标解压（返回的点串坐标，通过前向差分进行压缩）
							for (var i = 2; i < coors.length; i++) {
								coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
							}
							//将解压后的坐标放入点串数组pl中
							for (var i = 0; i < coors.length; i += 2) {
								pl.push({
									latitude: coors[i],
									longitude: coors[i + 1]
								})
							}
							vm.latitude = pl[0].latitude
							vm.longitude = pl[0].longitude
							vm.polyline = [{
								points: pl,
								color: '#1aad19',
								width: 4
							}]
							let tops = pl[pl.length-1]
						}
						
					})
				})
			}
     	},
		methods: {
			// 这里可以做一个scroll-y  的判断。 内部滚动
			changeHeight(val) {
				console.log(val)
				this.timeOver=val===true
				// if(val===true){
				// 	uni.navigateTo({
				// 		url:"order-desc"
				// 	})
				// }
			},
			getFooterHeight() {
				let query = wx.createSelectorQuery();
				query
					.select('.box')
					.boundingClientRect(res => {
						console.log(res);
						let height = res.height;
						this.footerHeight = res.height
					})
					.exec();
			},
			initDateTime(){
				return 	dateUtils.formatDateZh(new Date(this.orderInfo.settlementOrdersDateTime))
			},
			getWeightContent(weight){
				switch(weight){
					case "1": return "10-50公斤"
					break;
					case "2" : return "50-100公斤"
					break;
					case "3" : return "100公斤以上"
					break;
				}
			},
			receivingOrders(){
				this.$api("recovery-order","upd",{_id:this.orderInfo._id,state:3}).then(res=>{
					this.orderInfo.state=3
					uni.showModal({
						title:'已确认回收！',
						content:'是否给回收人员做出评价？',
						success: (re) => {
							if(re.confirm){
								uni.navigateTo({
									url:'myIssue?id='+this.orderInfo._id
								})
							}else{
								uni.navigateTo({
									url:'order'
								})
							}
						}
					})
				})
			},
			//预览图片
			previewImage(index) {
			  uni.previewImage({
			    current: index,
			    urls: this.orderInfo.images,
			  });
			},
			//进行经纬度转换为距离的计算
			Rad(d) {
				return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
			},
			/*
			 计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
			 默认单位km
			*/
			getMapDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = this.Rad(lat1);
				var radLat2 = this.Rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.Rad(lng1) - this.Rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				//s=s.toFixed(2);
				return s;
			},
			callPhone(phone){
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			},
			toAddress(){
				uni.openLocation({
					longitude:this.orderInfo.addressInfo.longitude,
					latitude:this.orderInfo.addressInfo.latitude
				})
			}
		}
	}
</script>
<style>
	.uni-card__header{
		background-color: #31b977;
	}
	.uni-card__header-title-text{
		color: #FFFFFF!important;
	}
</style>
<style lang="scss" scoped>
	@import '@/components/iview/mixin.scss';
	map {
		width: 100%;
		height: 75vh;
	}
	
	.content {
	        position: fixed;
	        box-shadow: 1px -3px 16px 0 rgba(0,0,0,.1);
	        border-radius: 20px 20px 0 0;
	        width: 100%;
	        bottom: 0;
			overflow: auto;
	        padding: 0;
	        z-index: 88;
	        text-align: center;
	        color: #FFFFFF;
	    }
	    .content::before{
	        content: '';
			z-index: 100;
	        position: absolute;
	        width: 160rpx;
	        height: 8rpx;
	        border-radius: 8rpx;
	        background-color: #FFFFFF;
	        top: 16rpx;
	        margin-left: -80rpx;
	    }
	.box {
		height: calc(100vh - 70vh);
	}
	.page-section-spacing{
		width:100%;
	}
	.swiper{
		height: 400upx;
		width: 100%;
	}
	
	// swiper-item 里面的图片高度
	swiper-item image{
		width: 100%;
		height: 400upx;
		border-radius: 20upx 20upx 0 0;
	}
	.page {
		height: 100%;

		.message {
			width: 100%;
			box-shadow: 0px 2upx 16upx 0px rgba(0, 0, 0, 0.06);
			position: fixed;
			top: 0px;
			background-color: #FFFFFF;
			&-title {

				padding-left: 30upx;
				padding-right: 30upx;

				&-span {
					height: 70upx;
					font-size: 50upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: rgba(34, 34, 34, 1);
					line-height: 70upx;
				}
			}
			&-tab {
				padding-left: 30upx;
				padding-right: 30upx;
				display: flex;
				&-item {
					&-badge {}
				}
			}
		}
		.message-tabs{
			background-color: #FFFFFF;
		}
		.message-content {
			margin-top: 75rpx;
			height:calc(100% - 280rpx);
			overflow-y: scroll;
			.message-card {
				display: flex;
				margin: 30upx 30upx 0;
				position: relative;
				width: calc(100% - 30px);
				&-topRight{
					position: absolute;
					right:20upx;
					top:30upx;
					width: 130upx;
					background: #F0AD4E;
					color: #FFFFFF;
					height: 36upx;
					line-height: 36upx;
					font-size: 26upx;
					text-align: center;
					border-radius: 12upx;
				}

				&-left {
					width: 70upx;
					height: 70upx;
					font-size: 32upx;
					display: inline-block;
					text-align: center;
					line-height: 70upx;
					border-radius: 50%;
					color: white;
					background: rgba(74, 134, 236, 1);
				}

				&-right {
					flex: 1;
					position: relative;
					padding: 22upx 22upx;
					border: 2upx solid #E3E7EB;
					border-radius: 12upx;
					width: calc(100% - 30px);
					&-arrow {
						position: absolute;
						width: 18upx;
						height: 39upx;
						left: -18upx;
						top: 60upx;
						z-index: 111;
						background-size: 100% 100%;
						
					}
					&-content {
						font-size: 30upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(34, 34, 34, 1);
						line-height: 42upx;
						display: flex;
						text-align: center;
						padding: 14upx 10upx 0px;
						&-item{
							flex:1;
						}
					}

					&-btns {
						display: flex;
						position: relative;
						margin-top: 20upx;
						font-size: 32upx;
						font-weight: 400;
						color: rgba(34, 34, 34, 1);
						line-height: 60upx;
						padding-top: 15upx;
						padding-left: 20upx;
						padding-right: 20upx;
						&:after {
							@include hairline();
							border-top-width: 1px;
						}

						&-divider {
							width: 1upx;
							background: #E3E7EB;
							height: 48upx;
						}

						&-reject {
							&-btn{
								background: #FF4259;
								border-radius: 10upx;
								color: #FFFFFF;
								text-align: center;
							}
							
						}

						&-agree {
							&-btn{
								background: #31b977;
								border-radius: 10upx;
								color: #FFFFFF;
								text-align: center;
							}
						}
					}

					&-info {
						font-size: 28upx;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
						line-height: 40upx;

						&-time {
							display: inline-block;
							font-size: 28upx;
							font-weight: 400;
							color: rgba(34, 34, 34, 1);
						}
					}

					&-title {
						display: flex;

						// justify-content: space-between;
						align-items: center;

						&-left {
							font-size: 34upx;
							font-weight: 400;
							color: #222222;
							flex: 1;

							span {
								color: #4A86EC;
							}
						}

						&-right {
							font-size: 32upx;
							font-weight: 400;
							color: rgba(153, 153, 153, 1);
						}
					}
				}
			}
		}

	}
</style>
